<template>
	<view>
	<!-- 	<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback"> -->
			<!-- <view class="detail-top">
				<view class="right">
					<image :src="detail_info.announcer.avatar" mode="aspectFill"></image>
					<view class="nickname">{{detail_info.announcer.nickname}} 发布</view>
				</view>
				<view class="left">
						<view class="money">
						<view>任务奖励：</view>
						<view class="add">+</view>
						<view class="real">0.8</view>
						<view class="yang">元</view>
					</view>
					<view class="time">
						剩余时间：51分19秒
					</view>
				</view>
			</view> -->
			<!-- 		<view class="videos-tip">
			<view class="title">
				<image src="/static/image/videos.png" mode="aspectFill"></image>
				<view>一分钟教你“如何快速做任务？”</view>
			</view>
			<view class="watch">
				立即观看
			</view>
		</view> -->

			<view class="deposit">
				<image src="/static/image/rz-icon.png" mode="aspectFill"></image>
				<text>任务金额已托管，安心赚钱有保证！</text>
			</view>
			<!--标题和进度-->
			<view class="task-box">
				<view class="progress">
					<view class="content">
						<image :src="detail_info.moonlight.thumb" mode="aspectFill"></image>
						<view class="title">
							<view class="title-item">{{detail_info.moonlight.title}}</view>
							<view class="progress-item">进度：{{detail_info.moonlight.quantity-detail_info.moonlight.surplus}}/{{detail_info.moonlight.quantity}}</view>
						</view>
					</view>
					<view class="money">
						￥<text>{{detail_info.moonlight.arrive_price}}</text>
					</view>
				</view>
				<!--任务详情数据-->
				<view class="detail-data">
					<view class="data-box">
						<view class="count">{{parseInt(detail_info.moonlight.amount_completed)+parseInt(detail_info.moonlight.processing)}}</view>
						<view class="title">已赚名额</view>
					</view>
					<view class="data-box">
						<view class="count">{{detail_info.moonlight.surplus}}</view>
						<view class="title">剩余名额</view>
					</view>
					<view class="data-box">
						<view class="count">{{detail_info.moonlightDetail.tasktimer}}小时</view>
						<view class="title">接单限时</view>
					</view>
					<view class="data-box">
						<view class="count">24小时</view>
						<view class="title">审核时间</view>
					</view>
				</view>
				<!--接单后可以进入流程-->
				<view class="record" @click="navgoto('/pages/task/record?id='+detail_info.selfOrder.id)" v-if="detail_info.selfOrder.status">
					<view class="left">
						<view>{{tabs[detail_info.selfOrder.status]}}</view>
						<text v-if="detail_info.selfOrder.status==1">请在{{detail_info.selfOrder.expiration_time}}前完成任务</text>
						<text v-else-if="detail_info.selfOrder.status==3 || detail_info.selfOrder.status==4">请前往任务大厅继续接单</text>
					</view>
					<view class="right">
						<text class="iconfont">&#xe616;</text>
					</view>
				</view>
			</view>
			<view class="task-box">
				<view class="explain">
					<view class="explain-line"></view>
					<view>接单须知</view>
				</view>
				<jyf-parser :html="moonlight"></jyf-parser>
			</view>
			<!--任务标题-->
			<view class="task-box">
				<view class="title">
					<text class="index-box">1</text>
					<view class="desc">{{detail_info.moonlightDetail.introduction}}<text v-if="detail_info.moonlightDetail.app_name">(App名称：{{detail_info.moonlightDetail.app_name}})</text></view>
				</view>
				<view class="copylink" v-if="detail_info.moonlightDetail.link">
					<view v-if="detail_info.selfOrder.status>0" class="linkbox">
						<view class="linkdesc">
							<view class="linkinfo">{{detail_info.moonlightDetail.link}}</view>
						</view>
						<view class="linkbutton" @click="copylinks">复制</view>
					</view>
					<view v-else>*******</view>
				</view>
				<!-- 	<view class="desc-count">共5步示例操作，<text >点击查看</text></view> -->
				<scroll-view scroll-x="true" class="scroll">
					<view class="img-item" v-for="(descimg,index) in detail_info.moonlightDetail.sample_graph" :key="index" @click="previewImage(detail_info.moonlightDetail.sample_graph,index)">
						<image :src="descimg" mode="aspectFill"></image>
						<view class="shuzi">{{index+1}}</view>
					</view>
				</scroll-view>
				<view v-if="detail_info.selfOrder.status==1 || detail_info.selfOrder.status ==5" class="button giveup" @click="giveuptask">放弃任务</view>
				<view v-else-if="detail_info.selfOrder.status ==4 || detail_info.selfOrder.status==0" class="button" @click="jointask">接受任务</view>
				<view v-else class="button" @click="gototasklist">参与更多任务</view>
			</view>
			<!--提交截图-->
			<view class="task-box">
				<view class="title">
					<text class="index-box">2</text>
					<text class="desc">{{detail_info.moonlightDetail.verification}}</text>
				</view>

				<view class="verimgbox">
					<!--示意图-->
					<view class="demonstration">
						<view class="comfir" v-for="(verimg,index) in detail_info.moonlightDetail.verification_diagram" :key="index">
							<view class="comfir-box">
								<view class="examples" @click="previewImage(verimg)">
									<image :src="verimg" mode="aspectFill"></image>
								</view>
							</view>
						</view>
					</view>

					<!--上传的截图-->
					<view class="demonstration">
						<view class="comfir" v-for="(item,index) in ver_img" :key="index">
							<view v-if="item==null" class="upload-box" @click="comfirimg(index)">+</view>
							<image style="background-color: #f8f8f8;" v-else class="ver-loadimg" :src="item" mode="aspectFill" @click="previewImage(item)">
						</view>
					</view>
				</view>

				<view class="verification" v-if="detail_info.moonlightDetail.verification_key">
					<input type="text" :placeholder="detail_info.moonlightDetail.verification_key" :disabled="detail_info.selfOrder.status==1?false:true"
					 @blur="getinput" :value="detail_info.selfOrder.verification_text" maxlength="50">
				</view>
				<view class="button" @click="submit_ver" v-if="detail_info.selfOrder.status==1">提交验证图</view>
			</view>
			<complaint></complaint>
		<!-- </mescroll-body> -->
		<!--加载遮罩-->
		<loadingpage v-if="globelloading"></loadingpage>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				globelloading: true,
				moonlight: getApp().globalData.ruleconfig.moonlight, //做单说明
				tabs: ['', '进行中', '待审核', '已通过', '已关闭', '未通过', '仲裁中', '待复审'],
				imgarr: 5,
				detail_info: {
					moonlight: '',
					moonlightDetail: {
						link: ''
					},
					announcer: '',
					selfOrder: {
						id: 0,
						expiration_time: '',
						status: 0,
						verification_text: ''
					}
				}, //订单详情
				id: '', //订单ID
				downOption: {
					auto: true, //是否在初始化后,自动执行downCallback; 默认true
					// bgColor: "#378aff",
					textLoading: '玩命加载中...',
					outOffsetRate: 0,
					autoShowLoading: false, //首次触发加载动画 
					textSuccess: "刷新成功",
				},
				upOption: {
					use: false
				},
				ver_img: [],
				ver_text: null,
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/article/index?key=5fc99a49322df'
			})
		},
		onLoad(option) {
			this.id = option.id
			console.log(this.id)
			//this.getdetail()
			this.getdetail()
		},
		watch: {
			detail_info() {
				this.globelloading = false
			}
		},
		methods: {
			//复制连接
			copylinks() {
				uni.setClipboardData({
					data: this.detail_info.moonlightDetail.link
				})
			},
			//去任务列表
			gototasklist() {
				uni.switchTab({
					url: '/pages/task/task'
				})
			},
			//提交验证图片 
			submit_ver() {
				let isimg = false
				this.ver_img.map((item, index) => {
					if (item == null) {
						isimg = true
					}
				})
				if (isimg) {
					this.$ShowMsg('必须提交验证图片')
					return
				}
				//是否需要填写验证信息
				if (this.detail_info.moonlightDetail.verification_key) {
					if (!this.ver_text) {
						this.$ShowMsg('请输入验证信息')
						return
					}
				}
				let submitdata = {
					id: this.detail_info.selfOrder.id,
					verification_diagram: this.ver_img,
					verification_text: this.ver_text
				}
				console.log(submitdata)
				this.$HttRequest({
					url: '/moonlightOrder/submitTask',
					param: submitdata
				}, 'POST', true).then((res) => {
					console.log(res)
					if (res.status === 10000) {
						this.$ShowMsg('验证图提交成功')
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/task/selfjoin'
							})
						}, 2500)
					} else {
						this.$ShowMsg(res.message);
					}
				}).catch((error) => {
					this.$ShowMsg(error.errMsg)
				})
			},
			getinput(e) {
				this.ver_text = e.detail.value
			},
			//上传截图
			comfirimg(ver_imgIndex) {
				if (this.detail_info.selfOrder.status != 1) {
					this.$ShowMsg('请先接受任务')
					return
				}
				let that = this
				uni.chooseImage({
					count: 1, //默认8
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(ImageRes) {
						//console.log(ImageRes)
						//图片直接上传
						ImageRes.tempFilePaths.map((item, index) => {
							that.$Uploadimg(item).then(res => {
								let img = JSON.parse(res)
								that.$set(that.ver_img, ver_imgIndex, img.data[0])
							}).catch(err => {
								console.log(err)
							})
						})
					},
					fail(error) {
						console.log(error)
					}
				})
			},
			//放弃任务
			giveuptask() {
				this.$HttRequest({
					url: '/moonlightOrder/giveUp',
					param: {
						id: this.detail_info.selfOrder.id
					}
				}, 'POST', true).then((res) => {
					console.log(res)
					if (res.status === 10000) {
						this.$ShowMsg('任务放弃', 'success')
						this.getdetail()
					} else {
						this.$ShowMsg(res.message);
					}
				}).catch((error) => {
					this.$ShowMsg(error.errMsg)
				})
			},
			//参与任务
			jointask() {
				if (this.$Logintip()) {
					this.$Userlogin()
					return
				}
				this.$HttRequest({
					url: '/moonlight/join',
					param: {
						id: this.id
					}
				}, 'POST', true).then((res) => {
					console.log(res)
					if (res.status === 10000) {
						this.$ShowMsg('接单成功', 'success')
						this.getdetail()
					} else {
						this.$ShowMsg(res.message);
					}
				}).catch((error) => {
					this.$ShowMsg(error.errMsg)
				})
			},
			//图片预览
			previewImage(imgarray, index = 0) {
				this.$Preimage(imgarray, index)
			},

			// downCallback() {
			// 	this.getdetail()
			// },
			getdetail() {
				this.$HttRequest({
					url: '/moonlight/details',
					param: {
						id: this.id
					}
				}).then((res) => {
					console.log(res)
					if (res.status === 10000) {
						this.detail_info = res.data
						// if (!this.detail_info.selfOrder) {
						// 	this.detail_info.selfOrder = {
						// 		expiration_time: '',
						// 		status: 0,
						// 		verification_text: ''
						// 	}
						// }
						//初始话验证图片
						this.ver_img = [];
						//订单已上传验证图片
						if (res.data.selfOrder && res.data.selfOrder.verification_diagram) {
							this.ver_img = res.data.selfOrder.verification_diagram
						} else {
							res.data.moonlightDetail.verification_diagram.map((item, index) => {
								this.ver_img.push(null)
							})
						}

						console.log(this.ver_img)
					} else {
						this.$ShowMsg(res.message);
					}
					this.mescroll.endSuccess()
				}).catch((error) => {
					//异常错误
					this.mescroll.endErr()
					this.$ShowMsg(error.errMsg)
				})
			},
			navgoto(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F0F0F0;
	}

	//担保金额
	.deposit {
		width: 100%;
		height: 60rpx;
		background-color: #e7fee2; 
		color: #66bd88; 
		// border-bottom-left-radius: 20rpx;
		// border-bottom-right-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		font-size: 28rpx;
		// border-bottom: 1rpx solid #66bd88;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}

	.task-box {
		background-color: #fff;
		width: 85%;
		margin: 20rpx auto;
		padding: 30rpx;
		border-radius: 20rpx;
		font-size: 28rpx;

		.explain {
			display: flex;
			width: 80%;
			justify-content: flex-start;
			align-items: center;
			font-weight: bold;
			margin-bottom: 20rpx;

			.explain-line {
				width: 8rpx;
				height: 30rpx;
				border-radius: 5rpx;
				background-color: $uni-color-primary;
				margin-right: 15rpx;
			}
		}

		.copylink {
			display: flex;
			justify-content: center;
			align-items: flex-start;
			flex-direction: column;
			color: $uni-color-primary;
			font-size: 28rpx;
			width: 90%;
			padding-bottom: 10rpx;
			padding-left: 38rpx;

			.linkbox {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: flex-end;
				flex-direction: column;
				.linkdesc{
					display: flex;
					justify-content:flex-start;
					align-items: center;
					width: 100%;
					.linkinfo{
						word-wrap:break-word;
						width: 100%;
					}
				}
				.linkbutton {
					font-size: 25rpx;
					border-radius: 10rpx;
					width: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 4rpx 10rpx;
					border: 1rpx solid #e6e6e6;
					color: #9e9e9e;
					margin: 10rpx 0;
				}
			}
		}

		.verification {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 90%;
			//margin-left: 20rpx;

			input {
				font-size: 28rpx;
				padding: 20rpx;
				background-color: #f5f5f5;
				width: 100%;
				height: 60rpx;
				border-radius: 20rpx;

			}
		}

		//示意图
		.verimgbox {
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			width: 80%;

			.demonstration {
				display: flex;
				flex-direction: column;


				.comfir {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					//margin-left: 20rpx;

					.upload-box {
						width: 200rpx;
						height: 200rpx;
						border-radius: 20rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #f8f8f8;
						font-size: 50rpx;
						font-weight: bold;
						color: #9e9e9e;
						margin: 20rpx;
						margin-bottom: 32rpx;

					}

					.ver-loadimg {
						width: 200rpx;
						height: 200rpx;
						border-radius: 20rpx;
						margin: 20rpx;
						margin-bottom: 32rpx;
					}

					.comfir-box {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						margin: 20rpx 0;
						position: relative;

						.examples {
							display: block;
							position: relative;

							image {
								width: 200rpx;
								height: 200rpx;
								margin-right: 20rpx;
								border-radius: 20rpx;
							}
						}

						.examples:before {
							display: flex;
							color: #fff;
							align-items: center;
							justify-content: center;
							content: '示意图';
							position: absolute;
							background: rgba(#000, 0.3);
							width: 200rpx;
							height: 200rpx;
							border-radius: 20rpx;
							z-index: 11;
							top: 0;
							left: 0;
						}


					}

				}
			}

		}

		.progress {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.content {
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.title {
					display: flex;
					align-items: flex-start;
					justify-content: center;
					flex-direction: column;
					margin-top: 10rpx;

					.title-item {
						font-weight: bold;
						font-size: 32rpx;
					}

					.progress-item {
						font-size: 22rpx;
						color: #9e9e9e;
						margin-top: 10rpx;
					}
				}
			}

			.money {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #F43F3B;
				font-size: 22rpx;

				text {
					font-weight: bold;
					font-size: 30rpx;
				}
			}
		}

		.record {
			display: flex;
			font-size: 28rpx;
			width: 92%;
			padding: 20rpx;
			border-top: 1rpx solid #f5f5f5;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-direction: column;

				text {
					font-size: 25rpx;
					margin-top: 10rpx;
					color: #9e9e9e;
				}
			}

			.right {
				display: flex;

				.iconfont {
					font-size: 30rpx;
					color: #e6e6e6;
				}
			}
		}

		.detail-data {
			width: 92%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 1rpx solid #f5f5f5;
			padding: 20rpx;
			padding-bottom: 0;
			margin-top: 10rpx;

			.data-box {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				font-size: 25rpx;

				.count {}

				.title {
					color: #9e9e9e;
				}
			}
		}

		.scroll {
			width: 100%;
			white-space: nowrap;
			margin-bottom: 30rpx;

			.img-item {
				margin-right: 25rpx;
				display: inline-block;
				border-radius: 20rpx;
				position: relative;
				width: 200rpx;
				height: 200rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
				}

				.shuzi {
					border-bottom-left-radius: 15rpx;
					border-top-right-radius: 20rpx;
					background-color: $uni-color-primary;
					position: absolute;
					top: 0;
					right: 0;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 5rpx 15rpx;
					font-size: 22rpx;
					z-index: 22;
					font-weight: bold;
				}
			}

			.img-item:before {
				content: '示意图';
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				width: 200rpx;
				height: 200rpx;
				position: absolute;
				z-index: 11;
				background: rgba(#000, 0.3);
				border-radius: 20rpx;
			}
		}

		.button {
			color: #fff;
			width: 60%;
			height: 75rpx;
			background-color: $uni-color-primary;
			border-radius: 10rpx;
			font-size: 28rpx;
			padding: 5rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 auto;
			margin-top: 20rpx;
		}

		.giveup {
			background-color: #f0f0f0;
			color: #9e9e9e;
		}

		.title {
			margin-bottom: 20rpx;
			color: #333;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;

			.index-box {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 22rpx;
				color: #fff;
				background-color: $uni-color-primary;
				width: 35rpx;
				height: 35rpx;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.desc {

				width: 100%;
			}
		}

		.desc-count {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			color: #9e9e9e;
			margin-bottom: 20rpx;

			text {
				color: #FF0000;
			}
		}
	}

	.videos-tip {
		width: 100%;
		height: 60rpx;
		background-color: #e4efff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 25rpx;
		color: $uni-color-primary;

		.title {
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 35rpx;
				height: 35rpx;
				margin: 0 30rpx;
				margin-right: 20rpx;
			}
		}

		.watch {
			width: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 5rpx;
			border-radius: 20rpx;
			border: 1rpx solid #378aff;
			margin-right: 20rpx;
			font-size: 22rpx;
		}
	}

	.detail-top {
		width: 100%;
		height: 150rpx;
		// background: linear-gradient(to right,#569bfc 10%,#378aff 80%);
		background-color: $uni-color-primary;
		font-size: 28rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-bottom: 20rpx;

		.right {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			image {
				border-radius: 50%;
				width: 90rpx;
				height: 90rpx;
				margin-bottom: 10rpx;
				border: 1rpx solid #fff;
			}

			.nickname {
				font-size: 22rpx;
			}
		}

		.left {
			display: flex;
			justify-content: center;
			align-items: flex-start;
			flex-direction: column;

			.money {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 15rpx;

				.add {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 22rpx;
				}

				.real {
					font-size: 40rpx;
					font-weight: bold;
					margin: 0 5rpx;
				}

				.yang {
					font-size: 23rpx;
				}
			}

			.time {
				display: flex;
				justify-content: center;
				align-items: center;

			}
		}

	}
</style>
